<template>
  <div class="timeout-box" v-text="showText()" v-show="currSeconds>0"></div>
</template>

<script>
export default {
  name: "TimeOutBox",
  props:{
    diffSconds:Number,
    callback:Function,
  },
  data:function () {
    return {
      currTimer:false,
      currSeconds:0,
    }
  },
  mounted() {
    let $this=this
    $this.currSeconds=$this.$props.diffSconds
    $this.currTimer=setInterval(function () {
      $this.run()
    },1000)
  },
  destroyed() {
    if(this.currTimer){
      clearInterval(this.currTimer)
    }
  },
  methods:{
    run:function () {
      if (this.currSeconds>=0){
        if (this.currSeconds<=0){
          this.$props.callback()
        }
        this.currSeconds--;
      }
    },
    showText:function () {
      if (this.currSeconds<=0){
        return ''
      }
      let hours=Math.floor(this.currSeconds/3600);
      let mins=Math.floor((this.currSeconds%3600)/60);
      let seconds=this.currSeconds%60;
      return '剩余支付时间: '+this.to2Bit(hours)+':'+this.to2Bit(mins)+':'+this.to2Bit(seconds)
    },
    to2Bit:function (n) {
      if (n<10){
        return '0'+n
      }else{
        return n
      }
    }
  }
}
</script>

<style scoped>
  .timeout-box{
    display: inline-block; padding: 4px 5px; background: #ffe6de; color: red; border-radius: 3px; line-height: 20px; height: 20px;
  }
</style>
